<template>
    <div class="dashboard">全局监控</div>
    <div class="canvas-box">
        <MonitorTarget
            @canvas-add-node="canvasAddNode"
            :targets="targets"
        ></MonitorTarget>
        <div class="image-box">
            <div id="mountNode" ref="mountNode"></div>
            <div style="width: 350px; padding: 20px; border: 1px solid #f1f1f1">
                <span style="display: inline-block; margin-bottom: 20px"
                    >全局监控流程图</span
                >
                <div v-for="item in tips" :key="item">
                    {{ '- ' + item }}
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import G6 from '@antv/g6'
import MonitorTarget from './MonitorTarget.vue'
export default {
    components: {
        MonitorTarget,
    },

    data() {
        return {
            count:0,
            graph: null,
            targets: [
                {
                    title: '机房',
                    items: ['主机'],
                },
                {
                    title: '网络',
                    items: ['CDN', '主域名'],
                },
                {
                    title: '前台',
                    items: ['静态资源', '接口响应', 'js报错'],
                },
                {
                    title: '主要页面',
                    items: ['页面监控'],
                },
            ],
            tips: [
                '支持自定义监控类型',
                '支持自定义监控链路',
                '支持实时监控',
                '单点连通性测试',
                '查看结点运行状态',
                '放大缩小重定位视图',
                '节点右键菜单可查询日志',
                '...',
            ],
        }
    },
    mounted() {
        const data = {
            nodes: [
                {
                    id: '0',
                    label: 'node-0',
                    x: 100,
                    y: 100,
                },
                {
                    id: '1',
                    label: 'node-1',
                    x: 250,
                    y: 100,
                },
                {
                    id: '2',
                    label: 'node-2',
                    x: 150,
                    y: 350,
                },
                {
                    id: '3',
                    label: 'node-3',
                    x: 420,
                    y: 380,
                },
            ],
            edges: [
                {
                    id: 'e1',
                    source: '0',
                    target: '1',
                },
                {
                    id: 'e2',
                    source: '0',
                    target: '3',
                },
                {
                    id: 'e3',
                    source: '3',
                    target: '2',
                },
            ],
        }
        const grid = new G6.Grid()
        const menu = new G6.Menu()
        const toolBar = new G6.ToolBar({
            position: { x: 10, y: 10 },
        })
        const minimap = new G6.Minimap({
            size: [100, 100],
            className: 'minimap',
            type: 'delegate',
        })
        const graph = new G6.Graph({
            container: 'mountNode',
            width: 600,
            height: 800,
            plugins: [grid, minimap, toolBar, menu],
            defaultNode: {
                size: [80, 40],
                shape: 'rect',
            },
            modes: {
                default: ['zoom-canvas', 'drag-canvas', 'drag-node'],
            },
            renderer:'svg'
        })
        graph.read(data)
        graph.render()
        this.graph = graph
    },
    methods: {
        canvasAddNode(event) {
            console.log(event);
            const {left,top} = this.$refs.mountNode.getBoundingClientRect();
            const label = event.target.getAttribute('data-label');
            const model = {
                id: `${label}@${this.count++}`,
                label,
                type:'rect',
                x: event.clientX - left,
                y: event.clientY - top,
                size:[130,30],
                style: {
                    fill: '#e6f6ee',
                },
            }
            this.graph.addItem('node', model);
        },
    },
}
</script>

<style>
.info-collection {
    display: flex;
    justify-content: space-evenly;
    justify-items: center;
    margin-bottom: 20px;
}
.dashboard {
    line-height: 30px;
    text-align: left;
    margin-bottom: 20px;
}
.canvas-box {
    display: flex;
}
.image-box {
    position: relative;
    display: flex;
}
#mountNode {
    z-index: 0;
}
</style>